<template>
	<view>
		<!-- 占位 -->
		<view class="zhanwei"></view>
		<!-- 占位 -->

		<!-- 返回按钮 -->
		<view style="position: fixed;top: 10upx;width: 750upx;left:10upx;z-index: 9999;" @click="goBack">
			<view class="backbtn">
				<view class="action cuIcon-back text-white" style="font-size: 160%;color: white;"></view>
			</view>
		</view>

		<view v-if="goodDeatil!=undefined">

			<!-- 轮播图 -->
			<view>
				<swiper class="square-dot" style="height: 750upx;margin-top: 10upx;" circular="true" :indicator-dots="true">
					<swiper-item v-for="(item,index) in goodDeatil.images" :key="index">
						<image mode="widthFix" class="swiperimg" :src="item.imgUrl"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 商品信息 -->
			<view class="goods_info bg-white">
				<view class="goods_name">
					{{goodDeatil.info.skuTitle}}
				</view>
				<view class="goods_price">
					<text class="money">￥ {{goodDeatil.info.price}}</text>
					<text class="h_money">￥123</text>
				</view>
			</view>
			<view class="other bg-white">
				<p>销量:{{goodDeatil.info.saleCount}}</p>
			</view>

			<!-- 选择商品开始，-->
			<view class="bg-white text-black text-center" style="margin-top: 20upx;padding: 10upx;">
				<view @tap="openSku(3)" style="padding: 10upx;height: 80upx;" class="flex justify-between">
					<!--第四步，使用-->
					<view class="flex">
						<view class="" style="font-size: 120%;margin-left: 5upx;">已选</view>
						<view class="text-gray text-center" style="margin-left: 20upx;">
							<text>{{hasSelected}}</text>
						</view>
					</view>
					<view><text class="cuIcon-right text-gray"></text></view>
				</view>
				<view class="flex justify-between" style="padding: 10upx; border-top:#CCCCCC solid 1upx; height: 80upx;">
					<view class="flex">
						<view style="margin-left: 5upx;font-size: 120%;">送至</view>
						<view style="margin-left: 20upx;" class="text-gray">河南科技大学医科2号楼614</view>
					</view>
					<view><text class="cuIcon-right text-gray"></text></view>
				</view>
				<view class="flex justify-between" style="padding: 10upx; border-top:#CCCCCC solid 1upx; height: 80upx;">
					<view class="flex">
						<view style="margin-left: 5upx;font-size: 120%;">运费</view>
						<view style="margin-left: 20upx;" class="text-gray">0.00</view>
					</view>
					<view><text class="cuIcon-right text-gray"></text></view>
				</view>
			</view>

			<view class="" style="margin-top: 30upx;">
				<view class="details_title">
					—— <text style="color: #666666;padding-top: 30upx;"> 商品详情 </text> ——
				</view>
				<!-- 商品参数 -->
				<view class="bg-white">
					<view v-for="(item,index) in goodDeatil.groupAttrs" :key="index">
						<view class="" style="font-weight: bold;margin:30upx 30upx;padding-top: 20upx;">{{item.groupName}}</view>
						<view class="flex justify-between align-center" v-for="(item2,index) in item.attrs" :key="index" style="padding-left: 50upx; margin-bottom: 10upx;border-top:#F2F2F2 solid 0.5upx;height: 100upx;">
							<view style="font-size: 26upx;">{{item2.attrName}}</view>
							<view style="margin-right: 40upx; font-size: 10upx;" class="">{{item2.attrValue}}</view>
						</view>
					</view>
				</view>

				<!-- 评论 -->
				<view class="bg-white">
					<view style="padding: 10upx;">
						<view>
							<view style="font-size: 120%;color: #333333;margin-left: 10upx;">商品评价</view>
						</view>
					</view>
				</view>
				<view   v-if="commentList.length!=0"  style="padding: 10upx;background-color: white;" class="align-center">
					<view style="font-weight: bold;margin-top: 20upx;" class="flex" >
						<view style="margin-left: 30upx;">用户</view>
						<view style="margin-left: 180upx;">评论</view>
						<view style="margin-left: 250upx;">时间</view>
					</view>
					<view style="border-bottom: #DDDDDD dashed 5upx;width: 700upx;margin-left: 20upx;margin-top: 15upx;margin-bottom: 15upx;"></view>
					<view  v-for="(item,index) in commentList" :key="index">
						<view class="flex justify-between align-center" style="padding: 10upx;">
							<view>
								<image class="round" style="width: 100upx;height: 100upx;" :src="item.memberHead"></image>
								<view style="font-size: 90%;padding-left: 10upx;">{{item.menberName}}</view>
							</view>
							<view style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.commentText}}</view>
							<view>{{item.createTime}}</view>
						</view>
					</view>
				</view>
				<view v-else class="bg-white" style="height: 50upx;">
					<text style="margin-left: 300upx;">暂无评论</text>
				</view>

				<view class="details_title " style="margin-top: 20upx;padding-top: 20upx;">
					—— <text style="color: #666666;margin: 0 20upx;"> 图文详情 </text> ——
				</view>
				<view class="bg-white" style="margin-top: 30upx;">
					<view v-for="(item,index) in decImgs" :key="index">
						<image :src="item" style="width: 750upx;" mode="widthFix"></image>
					</view>
				</view>
			</view>

			<view class="barfixed  cu-bar bg-white tabbar border ">
				<button class="action" open-type="contact" style="height: 60upx;" @tap="">
					<view class="cuIcon-service text-red">
						<view class="cu-tag badge"></view>
					</view>
					客服
				</button>
				<button class="action" style="height: 60upx;" @tap="">
					<view class="cuIcon-favor">
						<view class="cu-tag badge"></view>
					</view>
					收藏
				</button>
				<view class="action" style="height: 60upx;" @tap="goCart">
					<view class="cuIcon-cart">
						<view class="cu-tag badge">{{myCartSize}}</view>
					</view>
					购物车
				</view>
				<view class="flex" style="width: 350upx;">
					<view class="bg-red submit " @tap="openSku(1)" style="height:100upx;">加入购物车</view>
					<view class="bg-red submit " @tap="openSku(2)" style="height:100upx;">立即订购</view>
				</view>
			</view>

			<!-- 组件 -->
			<goodAttr ref="goodAttr" @sendData="getDatafromComp" @addCart="addCart"></goodAttr>
		</view>

		<!-- 如果购物车没有数据 -->
		<view class="nocart flex flex-direction" v-else>
			<view class="iconfont" style="color:red;">
				<image src="../../static/icon/nogoods-active.png" style="height: 200upx; width: 200upx;" />
			</view>
			<view style="margin-top: 180upx;line-height: 80upx;font-size: 110%;">商品已丢失,<text style="color:#04B431" @tap="goMarket">去别处转转</text></view>
		</view>
	</view>
</template>


<script>
	import goodAttr from '../../components/goodAttr/goodAttr.vue';

	export default {
		components: {
			goodAttr
		},
		data() {
			return {
				goodDeatil: {
					info:{}
				},
				colors: 'red',
				decImgs: [],
				hasSelected: '',
				skuId: '',
				myCartSize: '0',
				memberId: '0',
				commentList: []
			}
		},
		onLoad(options) {
			console.log('onLoad')
			var skuId = options.skuId
			this.loadData(skuId)
			this.loadComment(skuId)
			this.getMyCartSize()
		},
		onShow() {
			console.log('onShow')
			this.getMyCartSize()
		},
		methods: {
			getMyCartSize() {
				var that = this
				uni.getStorage({
					key: 'userInfo',
					success: res => {
						that.memberId = res.data.id
						this.cartSize()
					},
					fail() {
						uni.showToast({
							title: '未登录'
						})
					}
				})
				
			},
			
			async cartSize() {
				var that = this
				let res = await this.$request({
					url: 'cartorder/cartitem/getCartList',
					params: {
						"memberId": that.memberId
					},
					type: 'GET'
				})
				that.myCartSize = res.data.length
			},

			goCart() {
				uni.switchTab({
					url: '../carts/carts'
				})
			},

			async loadData(skuId) {
				let res = await this.$request({
					url: `front/item/${skuId}.html`,
					params: {},
					methods: 'GET'
				})
				if (res.data != undefined) {
					this.goodDeatil = res.data
					this.decImgs = res.data.desc.decript.split(",")
					this.skuId = this.goodDeatil.info.skuId
				}
			},
			
			async loadComment(skuId) {
				let res = await this.$request({
					url: `cartorder/comment/getCommentList`,
					params: {skuId:skuId},
					methods: 'GET'
				})
				if(res.code == 0){
					this.commentList = res.data
				}
			},

			openSku(type) {
				switch (type) {
					case 1:
						this.$refs['goodAttr'].show(1, this.goodDeatil, this.skuId)
						break;
					case 2:
						this.$refs['goodAttr'].show(2, this.goodDeatil, this.skuId)
						break;
					case 3:
						this.$refs['goodAttr'].show(3, this.goodDeatil, this.skuId)
						break;
					default:
						console.log('default')
				}
			},

			goBack() {
				uni.navigateBack(-1)
			},

			getDatafromComp(goodDeatil, map) {
				this.hasSelected = ''
				for (let [key, value] of map) {
					if (key != 'count') {
						this.hasSelected = this.hasSelected + key + " : " + value.attrValue + " "
					}
				}
				this.goodDeatil = goodDeatil
				this.skuId = this.goodDeatil.info.skuId
				this.loadComment(this.skuId)
			},

			addCart() {
				var size = parseInt(this.myCartSize)
				size = size + 1
				this.myCartSize = size
			},

			goMarket() {
				uni.switchTab({
					url: '/pages/goods/goods'
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./goodsDetails.scss";

	/deep/.rich-img {
		width: 100%;
		height: auto;
	}

	/* 购物车为空的样式} */
	.nocart {
		text-align: center;
		margin-top: 30vh;
	}

	.nocart .iconfont {
		font-size: 80rpx;
		text-align: center;
	}

	.nocart view {
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
	}
</style>
